<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/lay/layui/css/layui.css" media="all" rel="stylesheet">
    <script charset="utf-8" src="/lay/layui/layui.js"></script>
    <script src="/js/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body class="layui-layout-body" style="overflow:auto; overflow-x: hidden;">
<div class="layui-container" style="margin-top: 50px;width: 700px;">
    <table class="layui-table" lay-even>
        <colgroup>
            <col width="150">
            <col width="200">
            <col width="150">
            <col width="150">
            <col width="150">
        </colgroup>
        <thead>
        <tr>
            <th>题目编号</th>
            <th>题目答案</th>
            <th>学生答案</th>
            <th>题目分数</th>
            <th>学生得分</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="list:${data.list}">
            <td th:text="${list.problem_id}"></td>
            <td th:text="${list.problem_answer}" th:if="${list.answer_is_image == 0}"></td>
            <td th:text="${list.test_answer}" th:if="${list.answer_is_image == 0}"></td>
            <td th:if="${list.answer_is_image == 1}"><a class="layui-btn layui-btn-xs"
                                                        th:onclick="|showPoint(${list.problem_id})|">查看评分点</a></td>
            <td th:if="${list.answer_is_image == 1}"><a class="layui-btn layui-btn-xs"
                                                        th:onclick="|downloadFile(${list.problem_id})|">下载答案文件</a></td>
            <td th:text="${list.exam_score}"></td>
            <td th:text="${list.test_score}" th:if="${list.answer_is_image == 0}"></td>
            <td th:if="${list.answer_is_image == 1}">
                <div><input type="text" style="width: 90px;" th:max="${list.exam_score}" th:id="${list.problem_id}" th:value="${list.test_score == 0 ?'':list.test_score}"
                            class="gard layui-input-inline"/></div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="layer-footer"
     style="z-index: 10; position: fixed; text-align: right; margin-left: -10%; bottom: 0; width:100%; height:50px">
    <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-bg-orange" lay-submit
            lay-filter="formSave">保存
    </button>
    <button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-bg-blue" lay-submit
            lay-filter="formSubmit">提交
    </button>
</div>
<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form;
        form.on('submit(formSave)', function (data) {
            var pattern = /^\d+(\.\d+)?$/
            var inputs = document.getElementsByTagName('input');
            var scoreList = [];
            for (var i = 0; i < inputs.length; i++) {
                var id = inputs[i].getAttribute("id");
                var max = inputs[i].getAttribute("max");
                var score = document.getElementById(id).value;
                if (score.length !== 0) {
                    if (!pattern.test(score)) {
                        alert("分数输入有误。\n问题编号：" + id);
                        return;
                    }
                    if (score > max) {
                        alert("评分不得大于题目分数。\n问题编号：" + id);
                        return;
                    }
                    var list = {};
                    list["id"] = id;
                    list["score"] = score;
                    scoreList.push(list);
                }
            }
            if (scoreList.length === 0) {
                alert("没有需要保存的题目分数");
            } else {
                $.ajax({
                    url: '/question/test/saveCorrect/' + [[${studentId}]] + '/' + [[${testId}]], //请求url
                    data: JSON.stringify({"list": scoreList}), //请求参数，类似于username=xxx&password=xxx
                    type: 'post', //请求方式
                    dataType: 'json', //返回值的类型
                    contentType: 'application/json;charset=utf-8',
                    success: function (result) {  //服务器成功返回时执行的函数
                        console.log(result);
                        if (result.code === 2000) {
                            alert("保存成功");
                        } else {
                            alert("保存失败，请稍后重试");
                        }
                    },
                    error: function () {
                        alert("网络错误，请稍后重试");
                    }
                });
            }
        });
        form.on('submit(formSubmit)', function (data) {
            var pattern = /^\d+(\.\d+)?$/
            var inputs = document.getElementsByTagName('input');
            var scoreList = [];
            for (var i = 0; i < inputs.length; i++) {
                var id = inputs[i].getAttribute("id");
                var max = inputs[i].getAttribute("max");
                var score = document.getElementById(id).value;
                if (score.length !== 0) {
                    if (!pattern.test(score)) {
                        alert("分数输入有误。\n问题编号：" + id);
                        return;
                    }
                    if (score > max) {
                        alert("评分不得大于题目分数。\n问题编号：" + id);
                        return;
                    }
                    var list = {};
                    list["id"] = id;
                    list["score"] = score;
                    scoreList.push(list);
                } else {
                    alert("有未进行评分的题目\n题目编号：" + id);
                    return;
                }
            }
            $.ajax({
                url: '/question/test/submitCorrect/' + [[${studentId}]] + '/' + [[${testId}]] + '/' + sessionStorage.getItem("id"), //请求url
                data: JSON.stringify({"list": scoreList}), //请求参数，类似于username=xxx&password=xxx
                type: 'post', //请求方式
                dataType: 'json', //返回值的类型
                contentType: 'application/json;charset=utf-8',
                success: function (result) {  //服务器成功返回时执行的函数
                    console.log(result);
                    if (result.code === 2000) {
                        alert("提交成功，即将关闭页面");
                        window.close();
                    } else {
                        alert("提交失败，请稍后重试");
                    }
                },
                error: function () {
                    alert("网络错误，请稍后重试");
                }
            });

        });
    });

    function showPoint(problem_id) {
        $.ajax({
            url: '/question/getPoint/' + problem_id, //请求url
            data: '', //请求参数，类似于username=xxx&password=xxx
            type: 'get', //请求方式
            dataType: 'json', //返回值的类型
            contentType: 'application/json;charset=utf-8',
            success: function (result) {  //服务器成功返回时执行的函数
                console.log(result);
                if (result.code === 2000) {
                    layui.use('layer', function () { //独立版的layer无需执行这一句
                        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
                        layer.open({
                            type: 1
                            , title: '题目评分点'
                            , offset: 'auto'
                            , id: 'layerDemo' //防止重复弹出
                            , content: '<div style="padding: 20px;">' + result.point + '</div>'
                            , btn: '关闭'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0 //不显示遮罩
                            , maxHeight: 800
                            , maxWidth: 1000
                            , yes: function () {
                                layer.closeAll();
                            }
                        });

                    });
                } else {
                    alert("获取评分点失败，请稍后重试");
                }
            },
            error: function () {
                alert("网络错误，请稍后重试");
            }
        });

    }

    function downloadFile(problem_id) {
        $.ajax({
            url: '/question/test/getAnswerFile/' + problem_id + '/' + [[${studentId}]] + '/' + [[${testId}]], //请求url
            data: '', //请求参数，类似于username=xxx&password=xxx
            type: 'get', //请求方式
            dataType: 'json', //返回值的类型
            contentType: 'application/json;charset=utf-8',
            success: function (result) {  //服务器成功返回时执行的函数
                console.log(result);
                if (result.code === 2000) {
                    if (result.fileName == -1) {
                        alert("未找到答案文件！");
                    } else {
                        if (result.fileName === ""){
                            alert("该学生未对本题进行作答");
                        }else {
                            window.open("/answer/" + result.fileName, "_blank");
                        }
                    }
                } else {
                    alert("下载答案文件失败，请稍后重试");
                }
            },
            error: function () {
                alert("网络错误，请稍后重试");
            }
        });

    }

</script>
</body>
</html>